<template>
	<Header />
	<div class="ele-admin-main" style="background-color: #f1f1f1;">
		<div class="ele-admin-body">
			<div class="ele-admin-content">
				<div class="ele-admin-content-view">
					<div class="ele-body" style="margin-left: 300px;margin-right: 300px;">
						<!-- 首页轮播图 -->
						<a-carousel autoplay>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_1.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_2.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_3.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_4.jpg"></div>
						</a-carousel>
						<div style="margin-top: 10px;">
							<a-card title="所有产品">
								<a-list :grid="{ column: 4 }" item-layout="vertical" size="large" :pagination="pagination"
									:data-source="dataList" style="margin: -10px;">
									<template #renderItem="{ item }">
										<a-card hoverable style="margin: 10px;">
											<template #cover>
												<img height="240" :src="item.image"
													style="padding: 15px 15px 0px 15px;" />
											</template>
											<a-card-meta :title="item.name" >
												<template #description>
													<a-typography-paragraph style="font-size:15px;line-height: 1.75;"
														type="secondary" :ellipsis="{ rows: 2 }"
														:content="item.description.replace(/(<([^>]+)>)/ig, '')" />
													</template>
											</a-card-meta>
											<template #actions>
												<a-button @click="chakan(item)">查看详情</a-button>
												<a-popconfirm
												    v-if="item.status === 0"
												    title="确定要购买此产品吗?"
												    ok-text="确定"
												    cancel-text="取消"
												    @confirm="confirm(item)"
												    @cancel="cancel"
												  >
												    <a-button type="primary">立即购买</a-button>
												</a-popconfirm>
											    <a-button v-else >已下架</a-button>
											</template>
										</a-card>
									</template>
								</a-list>
							</a-card>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <ProductChakan v-model:visible="showEdit" :data="current" />
</template>

<script lang="ts" setup>
	import {
		onMounted,
		ref,
		watch,
		reactive
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';
	import {
		useRoute
	} from "vue-router";
	import Header from './header.vue';
	import {
		pageProducts
	} from '@/api/neirong/product';
	import type {
		Product
	} from '@/api/neirong/product/model';
	import ProductChakan from './product/product-chakan.vue';
	import {
		addCart
	} from '@/api/neirong/cart';
	import {
		useUserStore
	} from '@/store/modules/user';
	import type {
		Cart
	} from '@/api/neirong/cart/model';
	// 获取用户存储
	const userStore = useUserStore();

	const route = useRoute();
	const showEdit = ref(false);
	
	// 表单数据
	const form = reactive < Cart > ({
		id: undefined,
		name: '',
		type: '',
		price: '',
	});
	
	// 当前编辑数据
	const current = ref < Product > ();
	
	const chakan = (row ? : Product) => {
		current.value = row;
		showEdit.value = true;
	};
	
	// 查询参数
	const queryParam = ref({
		'page': 1,
		'limit': 8,
		'name': '',
	});

	const dataList = ref<Product[]>([]);

	onMounted(() => {
		queryProductPage(queryParam.value);
	})
	
	const queryProductPage = (queryParam : any) => {
		pageProducts(queryParam).then((res)=>{
			dataList.value = res.list
			pagination.value.total = res.count
		})
	}
	
	const confirm = (row ? : Product) => {
	  if(userStore.info){
		form.name = row.name;
		form.price = row?.price;
		form.type = '产品';
		addCart(form).then((msg) => {
					message.success(msg);
				})
				.catch((e) => {
					message.error(e.message);
				});  
	  }else{
		message.error("请先登录！");  
	  }
	  
	};
	
	const cancel = () => {
	  return
	};
	
	// 分页配置
	const pagination = ref({
		total: 0,
		current: 1,
		pageSize: 8,
		// 改变每页数量时更新显示
		onChange: (current:any, size:any) => {
			// 分页点击后更新
			pagination.value.current = current;
			pagination.value.pageSize = size;
			// 赋值分页参数
			queryParam.value.page = current;
			queryParam.value.limit = size;
			pageTickets(queryParam.value).then((res)=>{
				dataList.value = res.list
				pagination.value.total = res.count
			})
		}
	});
</script>

<script lang="ts">
	import {
		defineComponent
	} from 'vue';

	export default defineComponent({
		name: 'TicketIndex'
	});
</script>
